import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}
			// 用于接收Header的参数
			addTodo = (todoObj)=>{
				// 原来的todos
				const {todos} = this.state
				// 添加获取到的值
				const newTodos = [todoObj,...todos]
				// 更新状态
				this.setState({todos:newTodos})
			}

			// 改变勾选状态
			updateTodo = (id,done)=>{
				// 原来的todos
				const {todos} = this.state

				const newTodos = todos.map((todoObj)=>{
				if(todoObj.id === id){
					return {...todoObj,done}
				}else{
					return todoObj
				}
				})
				// 更新状态
				this.setState({todos:newTodos})

			}
				// 删除todo
				deleteTodo=(id)=>{
					// 原来的todos
					const {todos} = this.state
					// 删除指定id的todo对象
					const newTodos = todos.filter((todoObj)=>{
						return todoObj.id !== id
					})
					// 更新状态
					this.setState({todos:newTodos})
				}

						// 全选
						handelAllTodo = (done)=>{
							// 原来的todos
							const {todos} = this.state

							const newTodos = todos.map((todoObj)=>{
								return {...todoObj,done}

							})
							// 更新状态
							this.setState({todos:newTodos})
						}
						// 删除已完成的
						clearAllDone = ()=>{
							// 原来的todos
						const {todos} = this.state
						// 删除指定id的todo对象
						const newTodos = todos.filter((todoObj)=>{
							return !todoObj.done
						})
						// 更新状态
						this.setState({todos:newTodos})
						}

	render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo ={this.addTodo} />
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
					<Footer todos={todos} handelAllTodo={this.handelAllTodo} clearAllDone={this.clearAllDone}/>
				</div>
			</div>
		)
	}
}
